<template>
  <div class="flowBoxWarp">
    <VideoParent></VideoParent>
    <Header></Header>
    <CarSimulate v-if="store.mode == 'car'"></CarSimulate>
    <FireSimulate v-else-if="store.mode == 'fire'"></FireSimulate>
    <FloodSimulate v-else-if="store.mode == 'water'"></FloodSimulate>
    <InfoSimulate v-else></InfoSimulate>
    <Footer></Footer>
    <Toolbar></Toolbar>
    <u-progress></u-progress>
    <playing-progress></playing-progress>
  </div>
</template>
<script setup>
import { onMounted, getCurrentInstance, onUnmounted } from "vue";
import CarSimulate from "./CarSimulate.vue";
import FireSimulate from "./FireSimulate.vue";
import FloodSimulate from "./FloodSimulate.vue";
import InfoSimulate from "./InfoSimulate.vue";
import Toolbar from "@/components/Toolbar.vue";
import { useStore } from "@/stores";
const store = useStore();
const { proxy } = getCurrentInstance();
const bus = proxy.$bus;

onMounted(() => {
  document.addEventListener('keydown', keyHandler);
});
onUnmounted(() => {
  document.removeEventListener('keydown', keyHandler);
})
const keyHandler = (e) => {
  if (e.key === 'Escape') {
    bus.emit("doDistanceMeasure", false);
    bus.emit("doAreaMeasure", false);
  }
};

</script>
<style scoped lang="scss">
body {
  width: 100vw;
  height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
}

.flowBoxWarp {
  width: 100vw;
  height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
  position: relative;
  overflow: hidden;

  .content {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/images/bg.png');
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
